<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件化的基本使用</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--3.使用组件-->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <h1>局部------------------------</h1>
    <cpnc></cpnc>
</div>
</body>
<script>
    //1.创建组件构建器对象
    const cpnc = Vue.extend({
        template:`
            <div>
                <h2>标题</h2>
                <p>内容1...</p>
                <p>内容2...</p>
            </div>`
    })
    //2.注册组件
    Vue.component('my-cpn',cpnc)

    const app = new Vue({
        el:"#app",
        data:{

        },
        components:{
            cpnc:cpnc
        }
    })
</script>

</html>